<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>搜索</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
</head>
<body>
<div id="search-vue" v-cloak>
    <div class="header">
        <div v-back.tapmode class="back"></div>
        <div class="search-header-div">
            <div class="search-header-white" style="background:#f0f0f0">
                <img class="search-image" src="../../image/big/search_btn_grey.png"/>
                <form onsubmit="return todo()">
                    <input id="keyword" placeholder="您想找什么" type="search" v-model:value="words" style="outline: none;"/>
                </form>
            </div>
            <div class="header-right" style="color:#333">
                <span v-show="isSearch" onclick="todo()">搜索</span>
                <span v-show="!isSearch" v-back.tapmode>取消</span>
            </div>
        </div>
    </div>
    <div class="search-container">
        <div class="hot-search">
            <div class="hot-top">
                <span>热门搜索</span>
            </div>
            <div class="hot-body">
                <div class="hot-padding" v-for="hotWord in hotWords">
                    <span v-myclick="[hotWord, selectHotWord]">{{hotWord}}</span>
                </div>
            </div>
        </div>
        <div class="history-search">
            <div class="history-top">
                <span>搜索历史</span>
                <img src="../../image/delete.png " v-myclick="deleteAll"/>
            </div>
            <div class="history-body">
                <div class="history-one" v-show="!list.length">
                    <span>还没有任何搜索历史</span>
                </div>
                <div class="history-one" v-for="(item ,index) in list">
                    <div class="history-padding" v-myclick="[item, selectHisWord]">
                        <img class="img1" src="../../image/clock.png"/>
                        <span>{{item}}</span>
                        <img class="img2" src="../../image/shanchu.png" v-myclick.stop="[index, deleteTodo]"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script>
    var list;

    var vm;
    var hotWords;

    function todo() {
        var keyword = document.getElementById("keyword").value;

        if (!keyword) {
            pinet.alert("请输入要搜索的内容");
            return;
        }
        var params = {
            "keyword": keyword
        };
        var otherAttr = {
            vScrollBarEnabled: false
        };
        openWin('search_list', params, otherAttr);
        document.getElementById("keyword").value = '';

        return false;
    }
    apiready = function () {
        setBSImg();

        hotWords = JSON.parse(getPrefs("hotWords"));
        list = $api.getStorage('search_message');
        if (!list) {
            list = new Array();
        }
        api.addEventListener({
            name: 'searchKeyword'
        }, function () {
            vm.hotWords = JSON.parse(getPrefs("hotWords"));
            vm.list = $api.getStorage('search_message');

        });
        initApp();
        addListeners();
        api.parseTapmode();
    };
    function initApp() {
        vm = new Vue({
            el: '#search-vue',
            data: {
                list: list,
                hotWords: hotWords,
                todo: "",
                words: '',
                isSearch: false
            },
            watch: {
                'words': {
                    handler: function (newValue, oldValue) {
                        if (!newValue) {
                            this.isSearch = false;
                        } else {
                            this.isSearch = true;
                        }
                    }
                }

            },
            methods: {
                selectHotWord:function (item) {
                    document.getElementById("keyword").value = item;
                    todo();
                },
                selectHisWord: function (item) {
                    document.getElementById("keyword").value = item;
                    todo();
                },
                deleteTodo: function (index) {
                    this.list.splice(index, 1);
                    var key = "search_message";
                    $api.setStorage(key, list);
                },
                deleteAll: function () {
                    this.list = [];
                    var key = "search_message";
                    $api.setStorage(key, []);
                }
            }
        })
    }

    function openHome() {
        openWin('../../index', null, otherAttr);
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }
</script>

</body>
</html>
